<template>
    <div>
        <el-breadcrumb separator="/">
            <el-breadcrumb-item style="font-size: 18px;">图像检索</el-breadcrumb-item>
        </el-breadcrumb>
        <el-divider></el-divider>
        <el-button type="primary" round @click="handleClickForm">新增图像检索任务</el-button>
        <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="taskName" label="任务名称" align="center">
            </el-table-column>
            <el-table-column prop="collectTask" label="采集任务" align="center">
            </el-table-column>
            <el-table-column prop="content[0]" label="检索内容" align="center">
            </el-table-column>
            <el-table-column label="检索范围" align="center">
                <template #default="{ row }">
                    <span>{{ formatList(row.contentRange) }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="status" label="任务状态" align="center">
                <template #default="{ row }">
                    <el-progress :percentage="percentage(row)" :color="colors"></el-progress>
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                    <el-button @click="handleClickRetrieval(scope.row)" type="text" size="small"
                        :disabled="!(scope.row.status == '未检索')">检索</el-button>
                    <el-button @click="handleClickView(scope.row)" type="text" size="small"
                        :disabled="!(scope.row.status == '已完成')">查看</el-button>
                        <el-button type="text" size="small"
                        :disabled="!(scope.row.status == '已完成')">下载</el-button>
                    <el-button @click="handleClickDelete(scope.row)" type="text" size="small"
                        :disabled="!(scope.row.status == '已完成' || scope.row.status == '未检索')">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <el-dialog title="新增图像检索任务" :visible.sync="dialogFormVisible" center width="35%">
            <el-form :model="form">
                <el-form-item label="任务名称" :label-width="formLabelWidth">
                    <el-input v-model="form.taskName" autocomplete="off" style="width: 300px;"></el-input>
                </el-form-item>
                <el-form-item label="采集任务" :label-width="formLabelWidth">
                    <el-select v-model="form.taskId" placeholder="请选择采集任务" style="width: 300px;">
                        <el-option v-for="item in collectTaskOptions" :key="item.value" :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="检索范围" :label-width="formLabelWidth">
                    <el-select v-model="form.contentRange" multiple filterable allow-create default-first-option
                        placeholder="请输入类别组合" no-data-text="输入后回车以添加" style="width: 300px;">
                        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="检索内容" :label-width="formLabelWidth">
                    <el-select v-model="form.content[0]" default-first-option placeholder="请输入检索类别" style="width: 300px;">
                        <el-option v-for="item in form.contentRange" :key="item" :label="item" :value="item">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="addTask">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import axios from "axios";
export default {
    created() {
        // 创建一个定时器，每隔一段时间请求任务进度
        this.timer = setInterval(this.fetchProgress, 1000); // 每秒钟请求一次
    },
    beforeDestroy() {
        // 在组件销毁前停止定时器，以防止内存泄漏
        clearInterval(this.timer);
    },
    async mounted() {
        await axios.get("/api/retrievalTask/getCollectTask").then(res => {
            this.collectTaskOptions = [];
            this.map = res.data.data;
            var keys = Object.keys(this.map);
            for (var i = 0; i < keys.length; i++) {
                var key = keys[i];
                var value = this.map[key];
                this.collectTaskOptions.push({ value: key, label: value });
            }

            console.log(this.map)
        })
        await this.list();
    },
    methods: {
        fetchProgress() {
            // axios.get('/api/resultShow/progress').then(response => {
            //     // 如果任务已完成，停止定时器
            //     this.ttt = response.data.data
            //     console.log(this.ttt)
            //     if (this.ttt == '10') {
            //         clearInterval(this.timer);
            //     }
            // }).catch(error => {
            //     console.error('获取任务进度失败：', error);
            // });
            this.list();
        },
        percentage(row) {
            if (row.status == '未检索') {
                return 0;
            } else if (row.status == '已完成') {
                return 100;
            } else {
                return row.status;
            }
        },
        async list() {
            const param = {
                params: {
                    type: 1
                }
            };
            await axios.get("/api/retrievalTask/list", param).then(res => {
                this.tableData = res.data.data;
                for (var i = 0; i < this.tableData.length; i++) {
                    this.tableData[i]["collectTask"] = this.map[this.tableData[i]["taskId"]]
                }
            })
        },
        handleClickRetrieval(row) {
            const param = {
                params: {
                    id: row.id
                }
            };
            axios.get("/api/resultShow/start", param).then(res => {
                console.log(res);
            })
            console.log(row);
        },
        handleClickView(row) {
            console.log(row);
            this.$router.push({
                name: 'RetrievalView',
                params: {
                    id: row.id,
                    taskName: row.taskName,
                    content: row.content,
                    taskType: 1
                } // 携带的参数对象
            });
        },
        handleClickDelete(row) {
            console.log(row);
            const param = {
                params: {
                    id: row.id
                }
            };
            axios.delete("/api/retrievalTask/delete", param).then(res => {
                console.log(res.data);
                this.list();
            })
        },
        handleClickForm() {
            this.form.taskName = '';
            this.form.taskId = '';
            this.form.contentRange = [];
            this.form.content = [];
            this.dialogFormVisible = true;
        },
        addTask() {
            console.log(this.form.content);
            const param = this.form;
            axios.post("/api/retrievalTask/save?type=1", param).then(res => {
                console.log(res.data);
                this.list();
                this.dialogFormVisible = false;
            })
        },
        formatList(list) {
            return list.join(';');
        }
    },
    data() {
        return {
            tableData: [],
            dialogFormVisible: false,
            collectTaskOptions: [],
            form: {
                taskName: '',
                taskId: '',
                contentRange: [],
                content: [],
                fileType: []
            },
            formLabelWidth: '120px',
            colors: [
                { color: '#f56c6c', percentage: 20 },
                { color: '#e6a23c', percentage: 40 },
                { color: '#5cb87a', percentage: 60 },
                { color: '#1989fa', percentage: 80 },
                { color: '#6f7ad3', percentage: 100 }
            ]
        }
    }
}
</script>

<style></style>